<template>
  <div>
    <div class="top">
      <div style="width: 60px" @click="returnTap">取消</div>
      <span>更换手机号</span>
      <van-button type="info" style="height: 30px" @click="finishTap"
        >下一步</van-button
      >
    </div>
    <div class="text">
      更换手机后，下次登录可使用新手机号登录。当前手机号为:15170000000
    </div>
    <div class="input">
      <div class="inputText">+86</div>
      <input class="inpu1" type="number" placeholder="请填写手机号码" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    returnTap() {
      this.$router.go(-1);
    },
    finishTap() {
     this.$router.push('yanzhengma');
    },
  },
};
</script>
<style scoped>
.top {
  height: 60px;
  width: 90%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 60px;
  position: relative;
  background: #eeeeee;
}
.text {
  margin-top: 20px;
  color: 15px;
  width: 90%;
  margin-left: 5%;
}
.input{
    margin-top: 80px;
    width: 90%;
    margin-left: 10%;
    display: flex;
    align-items: center;
}
.inputText{
    width: 30%;
    background: #EDEDED;
    border: 0.5px solid #CACACA;
    border-left: none !important;
    font-weight: bold;
    font-size: 20px;
    height: 50px;
    padding-left: 10px;
    line-height: 50px;
}
.inpu1{
    color: #A8A8A8;
    height: 50px;
    padding: 0 10px;
    border-left: none;
    border-right: 1px solid #CACACA;
    border-top: 1px solid #CACACA;
    border-bottom: 1px solid #CACACA;
}
</style>